<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>会员权益</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">会员权益</h3>
            <el-row :gutter="20">
                <el-col :span="2" style="height: 40px;text-align: right;padding: 0;line-height: 40px">权益类型</el-col>
                <el-col :span="5">
                  <el-select v-model="typeId" >
                    <el-option label="请选择" value="0"></el-option>
                    <el-option v-for="d in typeList" :label="d.name" :value="d.id"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="2" style="height: 40px;text-align: right;padding: 0;line-height: 40px">权益名称</el-col>
                <el-col :span="5" >
                    <el-input placeholder="请输入"  v-model="equityName" >
                    </el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary"  @click="getEquityList">查询</el-button>
                </el-col>
                <el-col :span="2">
                  <el-button @click="clear">重置</el-button>
                </el-col>
            </el-row>

        </el-card>
      <el-card style="margin-top: 30px">
            <div style="width: 100%">

              <h4 style="width:50%;text-align: left;font-weight: normal;margin-top: 0px;display: inline-block" >权益列表</h4>
              <div style="width:50%;display: inline-block;text-align: right">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="readyAdd">新建</el-button>
              </div>
            </div>

            <el-table :data="equityList"  stripe>

              <el-table-column label="权益名称" prop="name"></el-table-column>

              <el-table-column label="权益图标" prop="equityimg">
                <template slot-scope="scope">
                  <img :src="nginxUrl+scope.row.equityimg" style="height: 50px; width: 50px;border-radius: 50%">
                </template>
              </el-table-column>

              <el-table-column label="权益类型" prop="equityType.name"></el-table-column>

              <el-table-column label="权益说明" prop="equityExplain"></el-table-column>

              <el-table-column label="权益状态" width="100px">
                  <template slot-scope="sc">{{sc.row.status==1?'启用':'禁用'}}</template>
              </el-table-column>

              <el-table-column label="最后修改时间" prop="updatetime" width="150px"></el-table-column>

              <el-table-column label="操作" width="150px">
                  <template slot-scope="scope">
                      <el-button type="warning" size="mini"  @click="showEditDialog(scope.row)">编辑</el-button>
                      <el-button type="danger" size="mini"  @click="removeById(scope.row.id)">删除</el-button>
                  </template>
              </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

<!--   添加  -->
      <el-dialog title="添加会员权益" :visible.sync="addFormVisible" width="40%" :close-on-click-modal="false" @close="addFormClose">
        <el-form :model="addForm" :rules="addRules" ref="addForm" size="small" label-width="100px" class="demo-ruleForm">
          <el-form-item label="权益名称" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="权益说明" prop="equityExplain">
            <el-input v-model="addForm.equityExplain"></el-input>
          </el-form-item>

          <el-form-item label="权益类型" style="text-align: left">
            <el-select v-model="addForm.typeid" >
              <el-option v-for="d in typeList" :label="d.name" :value="d.id"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="权益状态"  prop="status" style="text-align: left">
            <el-radio v-model="addForm.status" :label="true">启用</el-radio>
            <el-radio v-model="addForm.status" :label="false">禁用</el-radio>
          </el-form-item>

          <el-form-item label="权益图标" prop="equityimg" style="text-align: left">
            <el-input type="hidden" v-model="addForm.equityimg"></el-input>
            <el-upload
                class="avatar-uploader"
                :action="url"
                :show-file-list="false"
                :headers="headerToken"
                name="equityImg"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="doAdd">确 定</el-button>
            <el-button @click="addFormClose">取 消</el-button>
        </span>
      </el-dialog>

      <!--   修改   -->
      <el-dialog title="编辑会员权益" :visible.sync="editFormVisible" width="40%" :close-on-click-modal="false" @close="editFormClose">
        <el-form :model="editForm" :rules="editRules" ref="editForm" size="small" label-width="100px" class="demo-ruleForm">
          <el-form-item label="权益名称" prop="name">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="权益说明" prop="equityExplain">
            <el-input v-model="editForm.equityExplain"></el-input>
          </el-form-item>

          <el-form-item label="权益类型" style="text-align: left">
            <el-select v-model="editForm.typeid" >
              <el-option v-for="d in typeList" :label="d.name" :value="d.id"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="权益状态"  prop="status" style="text-align: left">
            <el-radio v-model="editForm.status" :label="true">启用</el-radio>
            <el-radio v-model="editForm.status" :label="false">禁用</el-radio>
          </el-form-item>

          <el-form-item label="权益图标" prop="equityimg" style="text-align: left">
            <el-input type="hidden" v-model="editForm.equityimg"></el-input>
            <el-upload
                class="avatar-uploader"
                :action="url"
                :show-file-list="false"
                :headers="headerToken"
                name="equityImg"
                :on-success="updateImg"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="doEdit">确 定</el-button>
            <el-button @click="editFormClose">取 消</el-button>
        </span>
      </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                headerToken: {
                  token:window.sessionStorage.getItem("token")
                },
                nginxUrl:this.$MyUrl.imgUrl + "equity/",
                imageUrl:'',
                url:this.$MyUrl.serverUrl + 'equity/upload',
                typeList:[],
                equityName:'',
                typeId:'',
                pageNum: 1,
                pageSize: 5,
                equityList: [],
                giftList:[],//所有礼物列表
                total: 9,
                addFormVisible: false,
                editFormVisible:false,
                addForm: {
                  name:'',
                  equityimg:'',
                  equityExplain:'',
                  typeid:2,
                  status:""
                },
                editForm: {
                  id:"",
                  name:'',
                  equityimg:'',
                  equityExplain:'',
                  typeid:'',
                  status:""
              },
              addRules: {
                 name: [
                   { required: true, message: "请输入权益名称", trigger: "blur" },
                   { min: 4, max: 8, message: "权益名称必须在4-8个字符之间", trigger: "blur" }
                 ],
                equityExplain: [
                  { required: true, message: "请输入权益说明", trigger: "blur" },
                  { min: 4, max: 20, message: "权益说明必须在4-20个字符之间", trigger: "blur" }
                ],
                /*equityimg:[
                  { required: true, message: "请选择", trigger: "blur" }
                ]*/
                },
              editRules:{
                name: [
                  { required: true, message: "请输入权益名称", trigger: "blur" },
                  { min: 4, max: 8, message: "权益名称必须在4-8个字符之间", trigger: "blur" }
                ],
                equityExplain: [
                  { required: true, message: "请输入权益说明", trigger: "blur" },
                  { min: 4, max: 20, message: "权益说明必须在4-20个字符之间", trigger: "blur" }
                ],
              }
            };
        },
        methods: {


          initType(){

            let url = "equity/queryAllType"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code == 101){
                    this.typeList = res.data.data
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },
          clear(){
            this.typeId='';
            this.equityName=''
          },

          updateImg(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.editForm.equityimg = res.data;
          },
          handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.addForm.equityimg = res.data;
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          },



          doEdit(){
            this.$refs.editForm.validate(valid=>{
              if (!valid){
                return ;
              }
              let url = "equity/modify";
              this.$axios.put(url,this.editForm).then(res=>{
                if (res.data.code == 101){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.editFormVisible = false ;
                  this.$refs.editForm.resetFields();
                  this.searchEquity();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            })

          },
          editFormClose(){
            this.editFormVisible=false
            this.$refs.editForm.resetFields();
          },
          showEditDialog(row) {
            this.editFormVisible=true;
            this.editForm=row;
            this.editForm.typeid=row.equityType.id
            this.imageUrl = this.nginxUrl + row.equityimg
          },
          removeById(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                  let url = "equity/delete/"+id ;
                  this.$axios.delete(url)
                      .then(res=>{
                        if (res.data.code == 101){
                          this.$message({
                            type:"success",
                            message:res.data.msg,
                            duration:1000
                          })
                          this.searchEquity();
                        }else {
                          this.$message({
                            type:"error",
                            message:res.data.msg,
                            duration:1000
                          })
                        }
                      })
                }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });

          },
        readyAdd(){
          this.addFormVisible=true;
          this.imageUrl = '';
        },
        doAdd() {
            this.$refs.addForm.validate(valid=>{
              if (!valid){
                return ;
              }
              console.log(this.addForm)

              let url = "equity/add";
              this.$axios.post(url,this.addForm).then(res=>{
                if (res.data.code == 101){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.addFormVisible = false ;
                  this.$refs.addForm.resetFields();
                  this.searchEquity();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });


            })
          },
        addFormClose() {
              this.$refs.addForm.resetFields();
              this.addFormVisible=false;
          },

        getEquityList() {
            let url = "equity/queryByPage";
            this.$axios.get(url,{
              params:{
                name:this.equityName,
                typeId:this.typeId,
                now:this.pageNum,
                size:this.pageSize
              }
            }).then(res=>{
              if (res.data.code == 101){
                this.equityList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
          searchEquity() {
              this.pageNum = 1;
              this.getEquityList();
          },
          handleSizeChange(newSize) {
              this.pageSize = newSize;
              this.getEquityList();
          },
          handleCurrentChange(newPage) {
              this.pageNum = newPage;
              this.getEquityList();
          },
          reloadData() {
              this.searchEquity();
              this.getEquityList();
              this.initType();
          }
      },
      created() {
          this.reloadData();

      }
    };
</script>
<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader-icon[data-v-0fff04cc]{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

  }
</style>